<template>
	<!-- 书籍列表By类别 -->
	<view class="content" style="padding-top:  var(--status-bar-height) ;">
		<view class="l-head">
			<view class="cu-bar search">
				<view class="search-form round bg-white">
					<text class="cuIcon-search"></text>
					<input :adjust-position="false" 
						type="text" 
						@input='searchKey'
						@confirm="$navto.navto('/pages/booklist/search?keyword='+keyword)" p
						laceholder="全网爽文一网打尽"
						confirm-type="search">
					</input>
				</view>
				<view class="action">
					<text @click="$navto.navto('/pages/booklist/search?keyword='+keyword)">搜索</text>
				</view>
			</view>
			<u-swiper interval="5000" :list="_imgs.banner" :effect3d="true" mode="rect"></u-swiper>
		</view>
		<view class="l-body">
			<view class="menu">
				<view class="cm" @click="$navto.navto('/pages/booklist/ranking_list')">
					<image mode="aspectFit" :src="_imgs.m1" class="swiper-image"> </image>
					<p>排行榜</p>
				</view>
				<view class="cm" @click="$navto.navto('/pages/booklist/types')">
					<image mode="aspectFit" :src="_imgs.m2" class="swiper-image"> </image>
					<p>分类</p>
				</view>
				<view class="cm">
					<image mode="aspectFit" :src="_imgs.m3" class="swiper-image"> </image>
					<p>新书</p>
				</view>
				<view class="cm" @click="$navto.navto('/pages/booklist/end_books')">
					<image mode="aspectFit" :src="_imgs.m4" class="swiper-image"> </image>
					<p>完结</p>
				</view>
				<view class="cm" @click="$navto.navto('/pages/booklist/bookshelf')">
					<image mode="aspectFit" :src="_imgs.m5" class="swiper-image"> </image>
					<p>书架</p>
				</view>
			</view>
			<book-list  :disable="{hot:true, type:true, news:true, endTime: true}"
				:dataSource="dataSource" 
				:enablePage="false"
				:dataUrl="dataUrl"></book-list>
		</view>

	</view>
</template>


<script>
	export default {
		data() {
			return {
				loadicon: "../../static/loading.gif",
				dataSource: 'https://m.xbiquwx.la/',
				dataUrl: 'paihangbang_weekvote/1.html',
				keyword: '',
			}
		},
		methods: {
			searchKey(event) {
				this.keyword = event.detail.value;
			},
		}
	}
</script>

<style>
	.menu {
		padding: 30rpx 0 0;
		overflow: hidden;
		width: 95%;
		margin: 0 auto;
	}

	.cm {
		width: 20%;
		float: left;
		text-align: center;
		list-style: none;
	}

	.menu .cm p {
		line-height: 50rpx;
		font-size: 25rpx;
	}

	.menu .cm image {
		height: 8vw;
		display: block;
		margin: 0 auto;
	}

	/*图片宽度设置100% ，高度300upx（设为auto图片无法显示）*/
	.swiper-image {
		width: 100%;
		height: 300rpx;
	}

	* {
		margin: 0;
		padding: 0;
	}
</style>
